@import "../common/constants";
@import "../common/header";
@import "../common/body";
@import "../common/footer";
@import "video_nav";

.main {
  .wrapper {
    width: 100%;

    .video-list {
      width: $pageWidth;
      margin: 20px auto 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;

      /* 如果最后一行是3个元素 */
      li:last-child:nth-child(4n - 1) {
          margin-right: calc(24% + 4% / 3);
      }
      /* 如果最后一行是2个元素 */
      li:last-child:nth-child(4n - 2) {
          margin-right: calc(48% + 8% / 3);
      }

      li{
        $videoItemHeight: 280px;
        $thumbnailHeight: 158px;
        width: 278px;
        height: $videoItemHeight;
        background-color: white;
        margin-bottom: 20px;

        &:hover{
          box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
        }

        .thumbnail-group{
          width: 100%;
          height: $thumbnailHeight;

          img{
            width: 100%;
            height: 100%;
          }
        }

        .video-info{
          padding: 16px;
          width: 100%;
          box-sizing: border-box;
          height: $videoItemHeight - $thumbnailHeight;
          position: relative;

          .title{
            color: $mainFontColor;
          }

          .author{
            margin-top: 10px;
            color: $assistFontColor;
            font-size: 14px;
          }

          .price-group{
            position: absolute;
            left: 16px;
            right: 16px;
            bottom: 16px;
            text-align: right;

            .free{
              color: $freeColor;
            }

            .pay{
              color: $payColor;
            }
          }
        }
      }
    }
  }
}
